<!--
选择产品
-->
<template>
  <a-cascader
      :field-names="fieldNames"
      :placeholder="placeholder"
      :options="options"
      v-model:value="defaultValue"
      @change="onChange"
      show-search
  />
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
const emit = defineEmits(['change','update:value'])
const props = defineProps({
  value: {
    type: Array,
    default: []
  },
  index: {
    type: Number,
    default () {
      return 0
    }
  },
  fieldNames: {
    type: Object,
    default () {
      return { label: 'name', value: 'code', children: 'children' }
    }
  },
  placeholder: {
    type: String,
    default: '请选择产品'
  },
})
const options = ref([
  {
    "code": "1",
    "name": "纱线",
    "children": [
      {
        "code": "2",
        "name": "棉花",
      },
      {
        "code": "3",
        "name": "羊毛",
      },
      {
        "code": "4",
        "name": "合成纤维",
      }
    ]
  },
  {
    "code": "5",
    "name": "织物",
    "children": [
      {
        "code": "6",
        "name": "平织物",
      },
      {
        "code": "7",
        "name": "针织物",
      },
      {
        "code": "8",
        "name": "无纺布",
      }
    ]
  },
  {
    "code": "9",
    "name": "家用纺织品",
    "children": [
      {
        "code": "10",
        "name": "床单",
      },
      {
        "code": "11",
        "name": "被罩",
      },
      {
        "code": "12",
        "name": "毛巾",
      },
      {
        "code": "13",
        "name": "窗帘",
      }
    ]
  },
  {
    "code": "14",
    "name": "服装",
    "children": [
      {
        "code": "15",
        "name": "T恤",
      },
      {
        "code": "16",
        "name": "裤子",
      },
      {
        "code": "17",
        "name": "外套",
      },
      {
        "code": "18",
        "name": "内衣",
      },
      {
        "code": "19",
        "name": "正式服装",
      }
    ]
  }
])
const defaultValue = ref([])

onMounted(() => {
  defaultValue.value = props.value
})

watch(() => props.value, (curr, old) => {
  defaultValue.value = curr
})

const onChange = (value,selectedOptions) => {
  // defaultValue.value = value
  emit('change', value, selectedOptions)
  emit('update:value', value)
}

</script>
